<?php
session_start();

/**
 * Retorna el html de los registros de flickr requeridos.
 * 
 * @author Jonathan.Araque 25/Sep/2012
 * 
 * @param type $tipo Tipo de búsqueda
 * @param type $criterio Criterio de búsqueda
 * @param type $cantidad Cantidad de resultados 
 * @return string html de los registros
 */
function getFlickrHtml($tipo, $criterio, $cantidad) {

    $html = "\n<div class='slides_container'>";

    $api_key = "1dc263ed8c964801657b49ee9ab48354";
    switch ($tipo) {
        case "1" : $tipo_bus = "tags";
            break;
        case "2" : $tipo_bus = "text";
            break;
    }
    
    $content = file_get_contents("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=$api_key&$tipo_bus=$criterio&per_page=$cantidad&format=json&nojsoncallback=1");
    $cant = 1;
    $xml = json_decode($content);
    if ($xml->stat == "ok") {
        foreach ($xml->photos->photo as $photo) {
            $urlFoto = "http://farm$photo->farm.staticflickr.com/$photo->server/$photo->id"."_$photo->secret.jpg";
            $html .= getFlickrItemHtml($urlFoto, $photo->owner, $photo->title, $cant);
        }
    }

    $html .= "\n</div>";

    return $html;
}

/**
 * Retorna el html correspondiente a cada item de flickr.
 * 
 * @author Jonathan.Araque 25/Sep/2012
 * 
 * @param type $image_url Url de la imágen
 * @param type $owner Nombre del propietario
 * @param type $text Twitt
 * @param type $id Identificador del tweet dentro del listado
 * @return string
 */
function getFlickrItemHtml($image_url, $owner, $text, $id) {
    $html = "\n<div class='slide'>";
    $html .= "\n<img src='$image_url' title='$text' style='float: left' height='230px' />";
    $html .= "\n<h1>@$owner</h1>";
    $html .= "\n<p>$text</p>";
    $html .= "\n<a href='#$id' class='link'></a>";
    $html .= "\n</div>";
    return $html;
}
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <title>Slides, A Slideshow Plugin for jQuery</title>

        <link rel="stylesheet" href="css/global.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script src="js/slides.min.jquery.js"></script>
        <script>
            $(function(){
                // Set starting slide to 1
                var startSlide = 1;
                // Get slide number if it exists
                if (window.location.hash) {
                    startSlide = window.location.hash.replace('#','');
                }
                // Initialize Slides
                $('#slides').slides({
                    preload: true,
                    preloadImage: 'img/loading.gif',
                    generatePagination: true,
                    play: 5000,
                    pause: 2500,
                    hoverPause: true,
                    // Get the starting slide
                    start: startSlide,
                    animationComplete: function(current){
                        // Set the slide number as a hash
                        window.location.hash = '#' + current;
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="container">
            <div id="example">
                <div id="slides">
                    <?php echo getFlickrHtml($_SESSION["slcImgTipo"], $_SESSION["txtImgCriterio"], $_SESSION["txtImgCantidad"]); ?>
                    <a href="#" class="prev">
                        <img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
                    </a>
                    <a href="#" class="next">
                        <img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next">
                    </a>
                </div>
                <img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
            </div>
        </div>
        <?php include('menu.html'); ?>
    </body>
</html>
